<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <title>User</title>
</head>
<body>



        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north'" style="height:50px">
                    <a href="#"  onclick="$('#dlg').dialog('open')" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
            </div>
            <div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px">
                    <table id="dg"></table>
            </div>
        </div>

        <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
            
                <form id="ff" method="post" action="http://localhost:3000/users/data">
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                            <input  type="checkbox" name="gender" value="1">
                    </div>
                    
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>


        </div>



    
    <script>
    $('#dg').datagrid({
        fit:true,
        border:false,
        pagination:true,
        pageSize:5,
        pageList: [5,10,15,20],
        url:'http://localhost:3000/users/list',
        columns:[[
            {field:'name',title:'姓名',width:100},
            {field:'gender',title:'性别',width:100,align:'right'},
            {field:'operate',title:'操作',width:300,formatter: 
            		function(value,row,index){
            			return "<a href=javascript:edit('" + row._id+"')>修改</a>"
			}}
        ]]
    });

    function submitForm(){
        $('#ff').form('submit');
    }
    function clearForm(){
        $('#ff').form('clear');
    }
    
    function edit(id){
    		window.parent.addTab('详情','component/detail.html?id='+id);
    }
</script>        
</body>
</html>